<template>
  <div class="member-card-content" style="padding-top: 10px;">
    <div class="card-content">
      <div class="title">
        <p> </p>
      </div>

      <div class="card-info">
        <div class="left">
          <p class="card-text">卡号：<p>
          <p class="card-num">{{cardInfo.card_no}}</p>
          <p class="valid-time">有效期：{{cardInfo.card_expire}}</p>
          <p class="last-used-time">上次使用时间：{{cardInfo.last_trade_time}}</p>
        </div>

        <div class="right">
          <p class="total">储值：{{cardInfo.deposit}}</p>
          <p class="integral">积分：{{cardInfo.point}}</p>
          <p class="card-level">卡等级：{{cardInfo.card_rank_name}}</p>
          <p class="card-status">卡状态：{{cardInfo.card_status_name}}</p>
        </div>

        <div class="clear"></div>
      </div>


    </div>

    <loading :show="showLoading" :text="showLoadingText"></loading>
    <toast v-model="showToast" width="5rem" :type="toastType" :time="800" :text="toastText"></toast>

  </div>
</template>
<script>
  import { Loading, Toast} from 'vux'

  import {utils} from './../common/utils/utils'
  import {oauth} from './../common/utils/oauth'

  const common = require('./../common/utils/common')

  export default {
    components: {
      Loading,
      Toast
    },
    data() {
      return {
        mchCodeByUrl: common.getUrlParam('mchCode'),
        openidByUrl: common.getUrlParam('openid'),
        cacheMchCode: localStorage.getItem('mchCode'),
        cacheMchType: localStorage.getItem('type'),
        openid: localStorage.getItem('openid'),

        //卡信息
        cardInfo: [],
        cardNo: '',

        showMask: false,
        showLoading: false,
        showLoadingText: '',
        showToast: false,
        toastType: 'cancel',
        toastText: '',
      }
    },
    beforeCreate() {
      document.title = '会员卡详情'
    },
    async created() {
      const _this = this
      this.showLoading = true

      this.cardNo = this.$route.params.cardNo

      //授权
      oauth.checkOauth(utils, _this)

      const result = await utils.memberCardInfo(this.openid, this.cacheMchCode, this.cardNo, _this)

      if (!common.isEmptyString(result.info)) {
        this.showLoading = false
        this.cardInfo = result['info']
      }

    },
    methods: {
      hi: function () {
        alert(1)
      }
    }
  }
</script>
<style>
  .clear{
    clear: both;
  }
  .member-card-content {
    background-color: #F2F2F2;
    min-height: 17.787rem; }
  .member-card-content .card-content .title {
    padding: 0 0.4rem 0 0.4rem; }
  .member-card-content .card-content .title p {
    line-height: 0.933rem;
    font-size: 0.427rem; }
  .member-card-content .card-content .card-info {
    padding: 0.267rem 0.2rem 0.267rem 0.3rem;
    background-color: #fff; }
  .member-card-content .card-content .card-info .left {
    float: left; }
  .member-card-content .card-content .card-info .left .card-text {
    font-size: 0.427rem;
    line-height: 0.667rem; }
  .member-card-content .card-content .card-info .left .card-num {
    color: #0F6F0F;
    font-size: 0.48rem;
    line-height: 0.933rem; }
  .member-card-content .card-content .card-info .left .valid-time {
    line-height: 0.667rem; }
  .member-card-content .card-content .card-info .left .last-used-time {
    line-height: 0.667rem; }
  .member-card-content .card-content .card-info .right {
    float: right;
    font-size: 0.427rem;
    text-align: right; }
  .member-card-content .card-content .card-info .right .total {
    line-height: 0.8rem; }
  .member-card-content .card-content .card-info .right .integral {
    line-height: 0.667rem; }
  .member-card-content .card-content .card-info .right .card-level {
    line-height: 0.667rem; }
  .member-card-content .card-content .card-info .right .card-status {
    line-height: 0.667rem; }

  /*# sourceMappingURL=memberCard.css.map */
</style>
